<template>
  <div>
    <el-card>
      <el-row type="flex" align="middle">
        <!-- 左列 -->
        <el-col>
          <el-button size="small " type="primary" @click="addProperty">添加房产</el-button>
        </el-col>
        <!-- 右列 -->
        <el-col>
          <el-input v-model="propertyForm.title_contains" placeholder="请输入内容" class="input-with-select" @input="clearForm" @clear="clearForm">
            <el-select slot="prepend" v-model="propertyForm.category" clearable class="categorySelect" style="width:110px;border-left:1px" placeholder="全部分类" @clear="clearForm">
              <el-option
                v-for="item in category"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>

            <el-select slot="prepend" v-model="propertyForm.agent" clearable class="agentSelect" style="width:110px;" placeholder="全部经纪" @clear="clearForm">
              <el-option
                v-for="item in agents"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-button slot="append" icon="el-icon-search" @click="search" />
          </el-input>
        </el-col>
      </el-row>
      <hr>
      <!-- 表格 -->
      <el-table
        :data="propertyList"
        height="350px"
        style="width: 100%"
        :fit="true"
        :border="true"
      >
        <el-table-column
          prop="image"
          width="180"
          align="center"
          label="封面"
        >
          <template #default="{row}">
            <img v-fixImg="require('@/assets/image/1.jpg')" class="cover" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          label="标题"
        />
        <el-table-column
          prop="tags"
          align="center"
          label="标签"
        >
          <template #default="{row}">
            <el-tag v-for="item in row.tags" :key="item" type="success" size="mini">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="地址"
        />
        <el-table-column
          align="center"
          label="分类"
        >
          <template #default="{row}">
            {{ row.category||row.category===''?row.category.title:'默认' }}
          </template>

        </el-table-column>
        <el-table-column
          align="center"
          prop="agent.name"
          label="经纪"
        />
        <el-table-column
          prop="price"
          align="center"
          label="价格"
        />
        <el-table-column
          prop="desc"
          align="center"
          label="介绍"
        />
        <el-table-column
          align="center"
          label="图片"
          width="180"
        >
          <template #default="{row}">
            <img v-for="(item,index) in row.photos" :key="index" v-fixImg="require('@/assets/image/1.jpg')" class="pic" :src="item">
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="操作"
          width="200px"
        >

          <template #default="{row}">
            <el-button type="primary" size="mini" @click="editProperty(row.id)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination background :total="total" :current-page.sync="current" :page-size="getPage._limit" layout="prev, pager, next,jumper" @current-change="changePage" />
      </el-row>
    </el-card>

    <Addproperty ref="Addproperty" :is-show-dialog.sync="isShowDialog" @sendAgents="getAgents" @sendCategory="getCategory" @reloadPage="loadPage" />
  </div>
</template>

<script>
import Addproperty from './components/Addproperty.vue'
import { getPropertyList, delProperty, getPropertyCount } from '@/api/property'
// import { getCategoryList } from '@/api/category'
export default {
  components: {
    Addproperty
  },
  data() {
    return {
      propertyList: [],
      isShowDialog: false,
      total: 0,
      current: 1,
      propertyForm: {
        title_contains: '',
        agent: '',
        category: ''
      },
      getPage: {
        _limit: 5,
        _start: 0
      },
      form: {},
      // 经纪人
      agents: [],
      agentValue: '',
      // 分类
      category: [],
      categoryValue: ''
    }
  },
  async created() {
    this.getPropertyList(this.getPage)
    this.getPropertyCount(this.getPage)
  },
  methods: {
    async getPropertyList(params) {
      const { data } = await getPropertyList(params)
      // console.log(148, data)
      this.propertyList = data
    },
    async getPropertyCount(params) {
      const { data } = await getPropertyCount(params)
      this.total = data
      console.log('总条数', this.total)
    },
    // 切换页码
    async changePage(current) {
      this.current = current
      const { data } = await getPropertyList({
        _limit: this.getPage._limit,
        _start: current * this.getPage._limit - this.getPage._limit
      })
      this.propertyList = data
    },
    // 添加房产
    addProperty() {
      this.isShowDialog = true
      // this.propertyForm._start = Math.floor(++this.total / this.propertyForm._limit) * this.propertyForm._limit
    },
    // 编辑房产
    async editProperty(id) {
      // console.log(147, data)
      this.$refs.Addproperty.getPropertyDetail(id)
      this.isShowDialog = true
    },
    // 删除房产
    async del(id) {
      try {
        await this.$confirm('确定删除此房产吗?')
        await delProperty(id)
        this.$message.success('操作成功')

        if (this.propertyList.length === 1) {
          this.current--
        }
        this.getPage._start = this.current * this.getPage._limit - this.getPage._limit
        this.getPropertyCount('')
        this.getPropertyList(this.getPage)
      } catch (error) {
        console.log(error)
      }
    },
    // 刷新页面
    loadPage() {
      this.getPropertyCount(this.getPage)
      this.getPropertyList(this.getPage)
    },
    // 获取经纪
    getAgents(agents) {
      this.agents = agents
    },
    // 获取分类
    getCategory(category) {
      this.category = category
    },
    clearForm() {
      this.form = {}
    },
    // 搜索
    async search() {
      if (this.propertyForm.category) {
        this.form.category = this.propertyForm.category
      }
      if (this.propertyForm.agent) {
        this.form.agent = this.propertyForm.agent
      }
      if (this.propertyForm.title_contains) {
        this.form.title_contains = this.propertyForm.title_contains
      }

      this.getPropertyList({ ...this.getPage, ...this.form })
      this.getPropertyCount({ ...this.getPage, ...this.form })
      // const { data } = await getPropertyCount({ ...this.getPage })
      console.log('搜索后的总条数', this.form)
      // console.log('搜索后的总条数', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.cover{
width: 180px;
  height: 100px;
  object-fit: contain;
}
.pic{
  width: 50px;
  height: 50px;
}
.categorySelect{

margin-right: 20px;
}
</style>
